<template>
    <div class="components_edit_modal">
        <el-dialog width="1000px" :title="title" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <!-- <quill-editor v-model="content"
                    ref="myQuillEditor"
                    class="editer"
                    :options="editorOption"
                    @ready="onEditorReady($event)">
      		</quill-editor> -->
            <!--组件-->
            <!-- 组件有两个属性 value 传入内容双向绑定 setting传入配置信息 -->  
            <editor class="editor" :value="content"  :setting="editorSetting" @input="(content)=> content = content"></editor>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small">确 定</el-button>
                <el-button @click="state = false" size="small">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor'
    import { editor } from '../../../common/editor'
    export default {
        components: {
            quillEditor,
            editor
        },
        data() {
            return {
                state: false,
                content:'我是富文本编辑器的内容',  
                //tinymce的配置信息 参考官方文档 https://www.tinymce.com/docs/configure/integration-and-setup/  
                editorSetting:{  
                    height:400,  
                },
                editorOption: {},
                title: '',
                type: '',
                imageUrl: '',
                attachment: [], //上传附件
                value: '',
                formInfo: {},
                rules: {
                    type: [{
                        required: true,
                        message: '请输入字典类型',
                        trigger: 'blur'
                    }],
                    dictValue: [{
                        required: true,
                        message: '请输入字典名称',
                        trigger: 'blur'
                    }],
                    description: [
                        // { required: true, message: '请输入字典描述', trigger: 'blur'}
                    ],
                    dictKey: [{
                        required: true,
                        message: '请输入字典值',
                        trigger: 'blur'
                    }]
                },
            }
        },
        created() {},
        mounted() {},
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill
            }
        },
        methods: {
            showDialog(val) {
                if (this.$refs['userInfo'] !== undefined) {
                    this.$refs['userInfo'].resetFields();
                }
                if (val) {
                    for (var key in val) {
                        this.userInfo[key] = val.userProfile[key];
                    }
                    this.title = "编辑用户";
                    this.type = "edit";
                } else {
                    this.title = "添加用户";
                    this.type = "add";
                }
                this.state = true;
            },
            onEditorReady(editor) {
                console.log('editor ready!', editor)
            },
            submit() {
                console.log(this.content);
                this.$message.success('提交成功！');
            },
            handleAvatarSuccess(res, file) {
                console.log("res, file");
                console.log(res, file);
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            adduserInfo() {
                let vm = this;
                vm.$refs.userInfo.validate((valid) => {
                    if (valid) {
                        let submission = ''; //提交方式
                        //选择提交方式
                        if (type == 'edit') {
                            submission = 'put';
                        } else {
                            submission = 'post';
                        }
                        // 提交
                        this.axios({
                            method: submission,
                            url: api.userInfo.dictHandle,
                            data: vm.userInfo
                        }).then((response) => {
                            if (response.data.code == 200) {
                                vm.state = false;
                                vm.$parent.$refs.userInfoTable.$emit('vuetable:refresh');
                                vm.$message.success(response.data.message);
                            } else {
                                vm.$message.error(response.data.message);
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            reloadFiles: function(files) {
                let vm = this;
                this.attachment = [];
                files.forEach((item, idnex) => {
                    let model = {
                        fileRealName: item.fileRealName,
                        objectKey: item.object
                    }
                    this.attachment.push(model)
                })
                console.log("this.attachment");
                console.log(this.attachment);
            },
        },
    };
</script>
<style lang="less">
    @blue: #3190e8;
    @bc: #e4e4e4;
    @fc: #fff;
    // 背景图片地址和大小
    .bis(@url) {
        background-image: url(@url);
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    //定位全屏
    .allcover {
        position: absolute;
        top: 0;
        right: 0;
    }
    //transform上下左右居中
    .ctt {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    //定位上下左右居中
    .ctp(@width, @height) {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -@height/2;
        margin-left: -@width/2;
    }
    //定位上下居中
    .tb {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    //定位左右居中
    .lr {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    //宽高
    .wh(@width, @height) {
        width: @width;
        height: @height;
    }
    //字体大小、行高、字体
    .ft(@size, @line-height) {
        font-size: @size;
        line-height: @line-height;
    }
    //字体大小，颜色
    .sc(@size, @color) {
        font-size: @size;
        color: @color;
    }
    //flex 布局和 子元素 对其方式
    .fj(@type: space-between) {
        display: flex;
        justify-content: @type;
    }
    .edit_container {
        padding: 40px;
        margin-bottom: 40px;
    }
    .editer {
        height: 350px;
    }
    .submit_btn {
        text-align: center;
    }
</style>